import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Checkbox } from '@tarojs/components'
import { AtSearchBar, AtButton } from 'taro-ui'
import './aiyanPolular.css'
import app from '../../../main.js'

export default class AiyanPolular extends Component {

    config = {
        navigationBarTitleText: '爱眼科普'
    }
    constructor() {
        super(...arguments)
        this.state = {
            value: '',
            //科普数据
            kepuArr : []
        }
    }
    onChange(value) {
        this.setState({
            value: value
        })
    }

    // 搜索
    onActionClick(value) {
        this.title = value;
        this.setState({
            kepuArr: []
        });
        this.getData();
    }

    //跳转到视频
    gotoAiyanPolularVideo(kepuArrId) {
        app.navigateTo('../aiyanPolularVideo/aiyanPolularVideo'+'?kepuid='+kepuArrId)
    }

    offect = 0;
    length = 25;
    total = 0;
    isFinlsh = false;
    title = '';

    //上拉加载
    onReachBottom() {
        if ((this.offect + this.length) < this.total) {
            app.toast('正在加载----')
            this.offect = this.offect + this.length;
            this.isFinlsh = false;
            //调用接口
            this.getData();
        } else {
            app.toast('没有更多数据了咯')
            this.isFinlsh = true;
        }
    }

    // 数据获取
    getData(){
        let me = this
        let data = {offset:this.offect,length:this.length, title: this.title}
        let docArray=[]
        app.post('video_recommends/videoList',data,function(res){
            var list = res.data.result.list;
            for (var i = 0; i < list.length; i++) {
                list[i].checked = false;
            }
            docArray =  me.state.kepuArr.concat(list)
            me.total  = res.data.result.total
            me.setState({
                kepuArr:docArray
            })
        })
    }

    // 确定
    confirm() {
        var list = this.state.kepuArr;
        for (var i = 0; i < list.length; i++) {
            var item = list[i];
            if (item.checked) {
                var ct_article = {
                    id: item.id,
                    title: item.title
                };
                app.ct_articles.push(ct_article);
            }
        }

        console.log('ct_articles', app.ct_articles);

        Taro.navigateBack({
            delta: 1
        });
    }

    onChangeCheck(index) {
        var list = this.state.kepuArr;
        list[index].checked = !list[index].checked;
        this.setState({
            kepuArr: list
        });
    }

    init() {
        this.getData();
    }

    componentDidMount(){
        this.init();
    }

    render() {
        return (
            <View>
                <View className='topSearchBar'>
                    <AtSearchBar
                        customStyle='background-color: #ededed;'
                        placeholder="请输入症状、眼病"
                        value={this.state.value}
                        onChange={this.onChange.bind(this)}
                        onActionClick={this.onActionClick.bind(this, this.state.value)}
                    />
                </View>
                {this.state.kepuArr.map((item, index) => {
                    return <View className='topInfo'>
                        <View>
                            <Checkbox className='checkbox-list__checkbox' value={item.id} checked={item.checked} onClick={this.onChangeCheck.bind(this, index)}></Checkbox>
                        </View>
                        <View className='infoImage'>
                            <Image
                                className='imageStyle'
                                src={item.image}
                            />
                        </View>
                        <View className='infoText'>
                            <View className='textSymptom'>
                                {item.title}
                                </View>
                            <View className="textDocInfo">
                                <View>
                                    <Image
                                        className='touxiang'
                                        src={item.head_image}
                                    />
                                </View>
                                <View className='docInfo'>
                                    <View>{item.doctor_name}  {item.positional_title}</View>
                                    <View>{item.hospital}</View>
                                </View>
                            </View>
                        </View>
                    </View>
                })}
                <View className='bottom'>
                    <View class='btn'><AtButton type='primary' className='confirm_btn' onClick={this.confirm.bind(this)}>确定</AtButton></View>
                </View>
            </View>
        )
    }
}